import React, { useState } from "react";
import { Button, message } from "antd";
import Draggable from "react-draggable";
import "./index.css";
import { Slider, Checkbox } from "antd";
import { atom, useRecoilState } from "recoil";
import {
  lightXState,
  lightYState,
  lightZState,
  showAxisState,
  meshColorState,
} from "@/store";
import { ColorPicker } from "antd";
import { Link } from "react-router-dom";
const MeshController = () => {
  const [expanded, setExpanded] = useState(true);

  const [lightX, setLightX] = useRecoilState(lightXState);
  const [lightY, setLightY] = useRecoilState(lightYState);
  const [lightZ, setLightZ] = useRecoilState(lightZState);

  const [showAxis, setShowAxis] = useRecoilState(showAxisState);

  const [color, setColor] = useRecoilState(meshColorState);

  // 处理滑块值变化的函数
  const handleSliderChangeX = (value) => {
    setLightX(value);
  };

  const handleSliderChangeY = (value) => {
    setLightY(value);
  };

  const handleSliderChangeZ = (value) => {
    setLightZ(value);
  };

  const handleChangeAxis = (e) => {
    setShowAxis(e.target.checked);
  };

  const handleDrag = (e, ui) => {
    // console.log(`Dragging: ${ui.x}px, ${ui.y}px`);
  };

  const toggleExpand = () => {
    console.log(`Toggle Expand ${expanded} `);
    setExpanded(!expanded);
  };

  function toTwoDigitHex(num) {
    // 将十进制数转换为16进制字符串
    const hex = num.toString(16);
    // 如果字符串长度为1，前面补0
    return hex.length === 1 ? "0" + hex : hex;
  }

  const handleChange = (nowColor) => {
    // console.log(color.metaColor.r, color.metaColor.g, color.metaColor.b);
    setColor(
      `#${toTwoDigitHex(nowColor.metaColor.r)}${toTwoDigitHex(nowColor.metaColor.g)}${toTwoDigitHex(nowColor.metaColor.b)}`,
    );
    // console.log(color); // 打印颜色字符串
  };

  return (
    <Draggable onDrag={handleDrag}>
      <div className={`draggable-div ${!expanded ? "collapsed" : ""}`}>
        <div className="draggable-handle">
          <Button type="primary" onClick={toggleExpand}>
            {expanded ? "收起控制栏" : "展开控制栏"}
          </Button>
        </div>
        {expanded && (
          <div className="content">
            <div style={{ padding: "20px" }}>
              <Slider
                min={-2}
                max={2}
                step={0.01}
                value={lightX}
                onChange={handleSliderChangeX}
              />
              <div style={{ marginTop: "10px" }}>当前 lightX 值：{lightX}</div>
            </div>
            <div style={{ padding: "20px" }}>
              <Slider
                min={-2}
                max={2}
                step={0.01}
                value={lightY}
                onChange={handleSliderChangeY}
              />
              <div style={{ marginTop: "10px" }}>当前 lightY 值：{lightY}</div>
            </div>
            <div style={{ padding: "20px" }}>
              <Slider
                min={-2}
                max={2}
                step={0.01}
                value={lightZ}
                onChange={handleSliderChangeZ}
              />
              <div style={{ marginTop: "10px" }}>当前 lightZ 值：{lightZ}</div>
            </div>
            <div>
              <ColorPicker
                value={color}
                onChange={handleChange}
                disabledAlpha
              ></ColorPicker>
            </div>
            <div>
              <Checkbox onChange={handleChangeAxis}>坐标轴</Checkbox>
            </div>
            <div>
              <Link to="/logs"><Button>日志页</Button></Link>
            </div>
          </div>
        )}
      </div>
    </Draggable>
  );
};

export default MeshController;
